<template>
  <div>
    <el-dialog v-model="dialogFormVisible" :title="props.type == 'add' ? '添加用户' : '修改用户'">
      <el-form ref="ruleFormRef" :model="form" :rules="rules">
        <el-form-item label="用户姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>

        <el-form-item label="用户名称" :label-width="formLabelWidth" prop="username">
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>

        <el-form-item label="用户密码" :label-width="formLabelWidth" prop="password">
          <el-input type="password" show-password v-model="form.password" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirm(ruleFormRef, $parent)"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<!-- 添加或者更新 -->
<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { addUser, updateUser } from '@/utils/api/acl/user'
import { User } from '@/utils/api/acl/user/type'

interface RuleForm {
  name: string
  username: string
  password: string
}

const props = defineProps({
  type: String
})

const ruleFormRef = ref<FormInstance>()

// 对话框的显示
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

// 表单的数据
const form = reactive({
  name: '',
  username: '',
  password: ''
})

// 表单校验规则
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 5, message: '最小长度5', trigger: 'blur' }
  ],
  username: [
    { required: true, message: '请输入用户名称', trigger: 'blur' },
    { min: 5, message: '最小长度5', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '最小长度6', trigger: 'blur' }
  ]
})

// 对话框显示的控制
const changeDialog = (row: User) => {
  if (row) {
    Object.assign(form, row)
  }
  dialogFormVisible.value = true
}

// 点击确认按钮
const confirm = async (formEl: FormInstance | undefined, $parent: any) => {
  if (!formEl) return
  await formEl.validate(async valid => {
    if (valid) {
      if (props.type == 'add') {
        const res = await addUser(form)
        if (res.data.code == 200) {
          ElMessage.success('新增成功')
        } else {
          ElMessage.error('失败')
        }
      } else {
        const res = await updateUser(form)
        if (res.data.code == 200) {
          ElMessage.success('更新成功')
        }
      }
      $parent.$parent.getUserData()
      dialogFormVisible.value = false
      cleanData()
    } else {
      return
    }
  })
}

// 点击取消按钮
const cancel = () => {
  dialogFormVisible.value = false
  cleanData()
}

// 清理表格数据
const cleanData = () => {
  ruleFormRef.value?.resetFields()
}

defineExpose({ changeDialog })
</script>

<style scoped></style>
